<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getData">点击修改{{arr}}</button>
        <button @click="getView">查看arr的值</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[1,2,3,4,5],
        },
        created(){
            console.log(this.arr) // [1,2,3,4,5]
            // 浅拷贝
            this.a = this.arr 
            // 深拷贝方法1
            // this.arr.map(item=>{
            //     this.a.push(item)
            // })
            // 深拷贝方法2
            // this.a = this.arr.concat()
            // 深拷贝方法3
            // this.a =   JSON.parse(JSON.stringify(this.arr))
        },  
        methods:{
            getData(){
                console.log(this.a)
                console.log(this.a.splice(0,3)) // [1,2,3]
                console.log(this.arr)  //  浅拷贝：[4,5]   深拷贝：[1,2,3,4,5]
            },
            getView(){
                console.log(this.arr)  //  浅拷贝：[4,5]   深拷贝：[1,2,3,4,5]
            }
        }
    })
</script>
</html>